<template>
	<view class="add-car">
		<view class="top flex-between">
			<view class="">请输入您的车牌</view>
			<view @click="changeNewEnergy" style="color: #BEBEBE; font-size: 28rpx;">新能源</view>
		</view>

		<view class="license-plate flex-center" :class="{ 'new-energy': isNewEnergy }" @click="show = true">
			<!-- <view
				v-for="i in (count + 1)"
				:key="i"
				class="item"
				:class="{ dot: i === 2, current: i !== 2 && (i < 2 ? i : i - 1) === value.length }"
			>
				{{ i === 2 ? '·' : (value[i < 2 ? i : i - 1] || '') }}
			</view> -->
			<view v-for="i in count" :key="i" class="item" :class="{ current: (i < 2 ? i : i ) === value.length }">
				{{ (value[i < 2 ? i : i ] || '')  }}
			</view>
		</view>

		<view class="flex-align">
			<view style="margin-right: 40rpx;">设为默认车辆</view>
			<u-switch v-model="checked" size="20" activeColor="#2f75fa" @change="change"></u-switch>
		</view>

		<view class="bottom-add-btn">
			<u-button text="绑定车牌" :disabled="value.length !== count" shape="circle" @click="add"
				color=" linear-gradient(270deg, #2f75fa 0%, #5e9afa 100%, #99c3fa 0%)"></u-button>
		</view>

		<u-keyboard mode="car" :show="show" @change="valChange" @backspace="backspace" @close="show = false" autoChange
			:tooltip="false"></u-keyboard>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	export default {
		data() {
			return {
				value: '',
				show: false,
				isNewEnergy: false, // 是否新能源
				checked: false,
				plate_type: 1,
			}
		},
		computed: {
			count() {
				if (this.isNewEnergy) {
					return 8; // 新能源8位
				}
				return 7; // 其他7位
			}
		},
		methods: {
			async add() {
				let that = this
				// 新能源plate_type2  油车1
				if (this.isNewEnergy == false) {
					this.plate_type = 1
				} else {
					this.plate_type = 2
				}
				if (this.checked == false) {
					this.is_default = 0
				} else {
					this.is_default = 1
				}
				let data = {
					open_id: uni.getStorageSync('openid'),
					plate_no: this.value,
					plate_type: this.plate_type,
					is_default: this.is_default,
				}
				let result = await index.platesub(data)
				if (result.code == 1) {
					uni.showToast({
						title: result.info,
						icon: 'none',
						mask: true
					})
					uni.navigateBack()
				} else {
					uni.showToast({
						title: result.info,
						icon: 'none',
						mask: true
					})
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				if (this.value.length < this.count) {
					this.value += val;
				}

				if (this.value.length === this.count) {
					this.show = false;
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) {
					this.value = this.value.substr(0, this.value.length - 1)
				};
			},
			changeNewEnergy() {
				this.isNewEnergy = !this.isNewEnergy;
				this.value = this.value.slice(0, this.count);
			},
			change(e) {
				this.checked = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 1;
	}

	.add-car {
		padding: 30rpx;

		.license-plate {
			margin-top: 43rpx;
			margin-bottom: 40rpx;
			color: #000000;
			font-size: 64rpx;
			border-radius: 16rpx;
			height: 127rpx;
			background-color: #ffffff;
			position: relative;
			text-align: center;

			&.new-energy {
				background-color: #ffffff;
			}

			&::before {
				content: '';
				position: absolute;
				left: 9rpx;
				right: 9rpx;
				top: 9rpx;
				bottom: 9rpx;
				border-radius: 8rpx;
				border: 1px solid #000000;
			}

			.item {
				margin: 0 4rpx;
				width: 70rpx;
				height: 84rpx;
				background-color: #e3e3e3;

				&.dot {
					width: 8rpx;
					margin: 0;
				}

				&.current {
					border-bottom: 4rpx solid #fff;
					animation: flash 1s infinite steps(1, start);
				}

				@keyframes flash {

					0%,
					100% {
						border-color: #000000;
					}

					50% {
						border-color: transparent;
					}
				}
			}
		}
	}
</style>